<template>
    <div id="rightbox">
         <h2>{{arr.name}}</h2>
         <div id="twoword">{{arr.upateFrequency}}</div>
         <div v-for="(item,index) in arr.artists">
             <router-link :to="{path:'/yunyin/white',query:{keyword:item.first}}">
             <span> {{index+1}}.{{item.first}}</span><span class="fire">&#xe608;</span>
             </router-link>
         </div>
         <div>...</div>
         <div id="twobox">
             <h2>{{str.name}}</h2>
         <div v-for="(item,index) in str.songs">
             <router-link :to="{path:'/yunyin/asong',query:{keyword:item.id}}">
             <span> {{index+1}}.{{item.name}}</span><span class="fire">&#xe608;</span>
             </router-link>
         </div>
         <div>...</div>
         </div>
          
    </div>
</template>

<script>
import store from '../../store'
import axios from 'axios'
export default {
    name:"listmes",
    data(){
        return{
          arr:'',
          str:'',
        }
    },
 mounted:function(){
     this.loading();
 },
 
    methods:{
        loading(){
            let that=this;
         axios.get("http://39.101.203.189:3000/toplist/detail").then(function(response) {
                 console.log(response.data.rewardToplist)
                 that.arr=response.data.artistToplist;
                 that.str=response.data.rewardToplist;
                    }, function(err) {})
        }   
    },
    components:{
       
    },

}
</script>

<style scoped> 
h2{
    position: relative;
    top:0px;
}
#rightbox{
    position: absolute;
    top:40px;
    left: 1000px;
    width: 210px;
    height: 520px;
    padding-left:30px;;
    border-left: 2px solid #888;
    color: aliceblue;
}
.fire{
  font-family: "iconfont" !important;
  font-size: 16px;
  color: #960617;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
 #twoword{
     position: relative;
     top:-12px;
     opacity: 0.8;
 }
 #twobox{
     position: relative;
     top:100px;
 }
 a{
     color: aliceblue;
 }
</style>